<template>
  <div class="songzhuanji">
    <div class="top">
      <div class="top-img">
        <img :src="zhanjiinfo.picUrl" alt class="zhuanjiPic" />
        <i class="iconfont icon-ffanhui-" @click="goback"></i>
        <div class="songdan">
          <span>专辑</span>
        </div>
        <div class="txt">
          <span>{{zhanjiinfo.name}}</span>
          <span>
            <span class="grey">歌手：</span>
            {{zhuanji.artist.name}}
          </span>
        </div>
      </div>
    </div>
    <div class="jianjie">
      <h3>专辑简介</h3>
      <div class="jianjieinfo">
        <div class="introduce">{{Description}}</div>
        <div class="more" v-if="!isShowAll && isRoll" @click="toDown">
          完整专辑介绍
          <i class="iconfontunicode">&#xe66e;</i>
        </div>
        <div class="more" v-if="!isShowAll && !isRoll" @click="toUp">
          收起
          <i class="iconfontunicode">&#xe600;</i>
        </div>
      </div>
    </div>
    <div class="bottom">
      <h4>歌曲列表</h4>
      <ul>
        <li v-for="(songinfo,id) in songinfo" :key="songinfo.id" @click="selectPlayList(songinfo)">
          <div class="shunxu">
            <h3>{{id+1}}</h3>
          </div>
          <div class="songinfoname">
            <span class="songname1">{{songinfo.name}}</span>
            <span
              class="songname2"
              v-for="ar in songinfo.ar"
              :key="ar.id"
            >{{ar.name}}-{{songinfo.al.name}}</span>
          </div>
          <div class="bofang">
            <i class="iconfontunicodetwo">&#xe659;</i>
          </div>
        </li>
      </ul>
    </div>
    <div class="pinglun">
      <h3>热门评论</h3>
      <ul>
        <li v-for="remenpinlun in hotpinlun" :key="remenpinlun.commentId">
          <span>
            <span class="pinluntext">{{remenpinlun.user.nickname}}</span>
            <img :src="remenpinlun.user.avatarUrl" alt class="pinglunimg" /> :
            <span class="grey">{{remenpinlun.content}}</span>
          </span>
          <div v-for="huifu in hotpinlun.beReplied" :key="huifu.beRepliedCommentId">
            回复：
            <span>
              <span class="pinluntext">{{huifu.user.nickname}}</span>
              <img :src="huifu.user.avatarUrl" alt class="pinglunimg" /> :
              <span class="grey">{{huifu.content}}</span>
            </span>
          </div>
        </li>
      </ul>
      <h3>全部评论</h3>
      <ul>
        <li v-for="pinlun in allpinlun" :key="pinlun.commentId">
          <span>
            <span class="pinluntext">{{pinlun.user.nickname}}</span>
            <img :src="pinlun.user.avatarUrl" alt class="pinglunimg" /> :
            <span class="grey">{{pinlun.content}}</span>
          </span>
          <div v-for="huifu1 in allpinlun.beReplied" :key="huifu1.beRepliedCommentId">
            回复：
            <span>
              <span class="pinluntext">{{huifu1.user.nickname}}</span>
              <img :src="huifu1.user.avatarUrl" alt class="pinglunimg" /> :
              <span class="grey">{{huifu1.content}}</span>
            </span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      songinfo: [],
      zhanjiinfo: {},
      allpinlun: [],
      hotpinlun: [],
      dianzanData: {},
      zhuanji: {},
      Description: null,
      infodetail: {},
      // 歌单介绍是否显示完整
      isShowAll: true,
      // 歌单介绍是否是收起状态
      isRoll: true,
    };
  },
  created() {
    this.getData();
    this.getzhuanjipinlun();
    this.getStoreSinger();
    this.getswimzhuanji();
    this.selectPlayList();
    console.log(this.$route.params.id); //参数取值时不需要加r
  },
  methods: {
    getData() {
      axios
        .get("/api/album", {
          params: {
            id: this.$route.params.id //发送网络请求的时候，使用的所有数据都是借口所特有的，不能随意更改
          }
        })
        .then(res => {
          console.log(res.data);
          this.songinfo = res.data.songs;
          this.zhanjiinfo = res.data.album;
        })
        .catch(err => {
          console.error(err);
        });
    },
    getswimzhuanji() {
      axios
        .get("/api/album/detail/dynamic", {
          params: {
            id: this.$route.params.id
          }
        })
        .then(res => {
          console.log(res.data);
          this.dianzanData = res.data;
        })
        .catch(err => {
          console.error(err);
        });
    },
    getzhuanjipinlun() {
      axios
        .get("/api/comment/album", {
          params: {
            id: this.$route.params.id //发送网络请求的时候，使用的所有数据都是借口所特有的，不能随意更改
          }
        })
        .then(res => {
          console.log(res.data);
          this.allpinlun = res.data.comments;
          this.hotpinlun = res.data.hotComments;
        })
        .catch(err => {
          console.error(err);
        });
    },
    // 点击按钮展开歌单介绍
    toDown() {
      this.Description = this.zhanjiinfo.description;
      this.isRoll = false;
    },
    // 点击按钮收起歌单介绍
    toUp() {
      this.Description = this.zhanjiinfo.description.slice(0, 100) + "...";
      this.isRoll = true;
    },
    selectPlayList(songinfo) {
      this.$store.commit("setSinger", songinfo); //可以理解为是一个动作action,muation是同步服务
      const clickrankid = songinfo.id; //这里的item后面的值是拉取数据里面的真实数据
      this.$router.push({
        //路由管理器必须要加r
        name: "ClickZuixinyinyue",
        //有多个参数时
        params: { id: clickrankid }
        //只有一个参数时
        // params:{playlistid},
      });
      // this.$router.push({
      //   path:`/playlistdetail/${playlistid}`
      // })
    },
    getStoreSinger() {
      console.log(this.$store.getters.zhuanji);
      //第一种方法，转化为json对象
      console.log(JSON.stringify(this.$store.getters.zhuanji) == "{}");
      // if(JSON.stringify(this.$store.getters.singer)=="{}"){
      //     console.log("if")
      //     this.singer = this.$store.getters.singer
      //     //把this.singer = this.$store.getters.singer临时保存下来，当值为空时，就可以使用临时把欧尼下来的值
      //     sessionStorage.setItem("singcover",JSON.stringify(this.$store.getters.singer));//key随意，
      // }else{
      //     console.log("else")
      //     this.singer = JSON.parse(sessionStorage.getItem("singcover"))
      // }
      // this.singer = this.$store.getters.singer
      //第二种方法，转化为长度
      console.log(Object.keys(this.$store.getters.zhuanji).length == 0);
      if (Object.keys(this.$store.getters.zhuanji).length != 0) {
        console.log("if");
        this.zhuanji = this.$store.getters.zhuanji;
        //把this.singer = this.$store.getters.singer临时保存下来，当值为空时，就可以使用临时把欧尼下来的值
        sessionStorage.setItem(
          "singcover",
          JSON.stringify(this.$store.getters.zhuanji)
        ); //key随意，
      } else {
        console.log("else");
        this.zhuanji = JSON.parse(sessionStorage.getItem("singcover"));
      }
      console.log(this.zhuanji);
    },
    goback() {
      this.$router.go(
        //go方法
        -1
      );
    }
  },
  watch: {
    "zhanjiinfo.description": function() {
      if (this.zhanjiinfo.description.length > 100) {
        this.Description = this.zhanjiinfo.description.substr(0, 100);
        this.isShowAll = false;
      } else {
        this.isShowAll = true;
      }
    }
  },
  filters: {
    numFilter(value, num) {
      return parseFloat(value).toFixed(num);
    }
  }
};
</script>
<style scoped>
.top {
  width: 100%;
  height: 200px;
  background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%);
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0%, #000000),
    color-stop(100%, #ffffff)
  );
  background: -webkit-linear-gradient(top, #000000 0%, #ffffff 100%);
  background: -o-linear-gradient(top, #000000 0%, #ffffff 100%);
  background: -ms-linear-gradient(top, #000000 0%, #ffffff 100%);
  background: linear-gradient(to bottom, #000000 0%, #ffffff 100%);
}
.top-img {
  height: 12rem;
  margin-bottom: 8rem;
  position: relative;
}
.txt > span {
  color: white;
  font-size: 18px;
  text-align: center;
  display: block;
  padding-top: 50px;
  box-sizing: border-box;
}
.songdan > span {
  background-color: red;
  /* 字体透明 */
  /* background: color;
    color: rgba(128, 128, 128,0.2); */
  position: absolute; /**绝对定位，在一个盒子的右下角，还需要设置相对定位 */
  top: 55px;
  left: 18px;
  font-size: 15px;
  color: white;
  box-sizing: border-box;
  justify-items: center;
  border-radius: 0px 10px 10px 0px;
  /* 两个属性值：左上 右上 右下 左下； */
  width: 50px;
}
h4 {
  /* width: 10px; */
  text-align: left;
  /* white-space: nowrap; 
    text-overflow: ellipsis;
    overflow: hidden; */
}
ul {
  margin: 0;
}
ul li {
  display: inline-block;
  text-align: left;
}
h3 {
  width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
ul li > span {
  color: grey;
  font-size: 12px;
  text-align: left;
  width: 280px;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  white-space: nowrap;
}
.iconfont {
  font-size: 25px;
  color: green;
  position: absolute; /*绝对定位*/
  left: 5px;
  z-index: 200;
}
.songinfoname > span {
  display: block;
}
.songinfoname {
  word-break: keep-all; /* 不换行 */
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
  text-overflow: ellipsis; /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
  width: 250px;
  /* box-shadow: 5px 5px 5px red; */
  float: left;
}
.songinfo > img {
  width: 60%;
  height: 60%;
  border-radius: 5px;
}
.pinglunimg {
  width: 20px;
  height: 20px;
}
.pinglun {
  text-align: left;
}
.grey {
  color: grey;
  font-size: 15px;
}
.pinluntext {
  font-size: 15px;
  color: rgb(17, 17, 114);
}
.zhuanjiPic {
  width: 140px;
  height: 140px;
  position: absolute;
  top: 1rem;
  left: 1rem;
}
.txt {
  position: absolute;
  right: 2rem;
}
.iconfontunicodetwo {
  color: grey;
  font-size: 25px;
  text-align: center;
}
.bottom > ul li {
  line-height: 20px;
  margin-top: 10px;
}
.bottom > ul li > h3 {
  float: left;
  margin-left: 1rem;
}
.shunxu {
  float: left;
  width: 30px;
  height: 30px;
}
.bofang {
  float: right;
  width: 30px;
  height: 30px;
}
.songname1 {
  color: black;
  font-size: 20px;
  width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.songname2 {
  color: grey;
  font-size: 11px;
}
.jianjieinfo {
  width: 100%;
  height: 100px;
  margin: 0 auto;
  /* border: 1px solid red; */
}
.jianjieinfo > .introduce {
  color: grey;
  line-height: 18px;
  font-size: 13px;
  letter-spacing: 3px;
  font-weight: normal;
  word-wrap: break-word;
}
.jianjie > h3 {
  text-align: left;
  margin-left: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.iconfontunicode{
  color: grey;
  font-size: 25px;
  text-align: center;
}
.more {
  position: absolute;
  top: 20rem;
  right: 0px;
  font-size: 12px;
  font-weight: normal;
  cursor: pointer;
  color: grey;
}
</style>